<template>
  <!-- 系统设置模块-节点逻辑管理页面 -->
  <div class="fillcontain">
    <el-form :model="searchParams"
             :rules="rules"
             ref="searchForm"
             label-width="100px"
             class="search_container">
      <el-row>
        <el-col :span="6">
          <el-form-item label="归属业务：" prop="business">
            <el-col :span="24">
              <el-select v-model="searchParams.business" clearable placeholder="请选择">
                <el-option
                    v-for="item in busiTypes"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="归属模块：" prop="module">
            <el-col :span="24">
              <el-select v-model="searchParams.module" clearable placeholder="请选择">
                <el-option
                    v-for="item in taskModules"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="节点名称：" prop="content">
            <el-input clearable v-model="searchParams.content" placeholder="节点名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" class="text_center">
          <el-button type="primary" icon="el-icon-search" @click="subGetList"></el-button>
          <el-button type="primary"
                     plain
                     icon="el-icon-refresh"
                     @click="resetSearch('searchForm')"></el-button>
        </el-col>
      </el-row>
    </el-form>
    <div class="contain">
      <!-- 操作按钮 -->
      <el-row>
        <el-col :span="24" class="pb15 pt5">
          <el-button type="danger" plain @click="doAdd()">新增</el-button>
        </el-col>
      </el-row>
      <div class="table_container">
        <el-table
            v-loading="loading"
            :data="tableData"
            highlight-current-row
            header-cell-class-name="table-header-class"
            style="width:100%">
          <el-table-column
              property="routeid"
              label="节点编号"
              align='center'>
          </el-table-column>
          <el-table-column
              property="content"
              label="节点名称"
              align='center'
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              property="business"
              label="归属业务"
              align='center'>
            <template slot-scope="scope">
              <span v-for="(item) in busiTypes"
                    v-if="scope.row.business==item.value">
                {{item.label}}
              </span>
            </template>
          </el-table-column>
          <el-table-column
              property="module"
              label="归属模块"
              align='center'>
            <template slot-scope="scope">
              <span v-for="(item) in taskModules"
                    v-if="scope.row.module==item.value">
                {{item.label}}
              </span>
            </template>
          </el-table-column>
          <el-table-column
              property="createId"
              label="创建人"
              align='center'>
          </el-table-column>
          <el-table-column
           min-width="160"
          show-overflow-tooltip
              property="lastUpdateTime"
              label="最新更新日期"
              align='center'>
          </el-table-column>
          <el-table-column
              property="isPublish"
              label="是否发布"
              align='center'>
            <template slot-scope="scope">
              <span v-for="(item) in isPublish"
                    v-if="scope.row.isPublish==item.value">
                {{item.label}}
              </span>
            </template>
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              align='center'>
            <template slot-scope="scope">
              <span class="operationIcon" @click="doDelete(scope.row.id)" v-if="scope.row.isPublish=='0'">
                <!-- 删除 -->
                <el-tooltip class="item" effect="light" content="删除" placement="top">
                    <!--<icon-svg iconClass="customerProfile"></icon-svg>-->
                    <i class="el-icon-delete"></i>
                </el-tooltip>
              </span>
              <span class="operationIcon ml10" @click="doUpdate(scope.row.id)">
                <!-- 修改 -->
                <el-tooltip class="item" effect="light" content="修改" placement="top">
                  <!--<icon-svg iconClass="crm"></icon-svg>-->
                  <i class="el-icon-edit"></i>
                </el-tooltip>
              </span>
              <!-- 删除时效设置，功能已添加在修改里 20200211
              <span class="operationIcon ml10" @click="doAgingSet(scope.row.id)">
                <el-tooltip class="item" effect="light" content="时效设置" placement="top">
                  <i class="el-icon-time"></i>
                </el-tooltip>
              </span>
               -->
            </template>
          </el-table-column>
        </el-table>
        <el-row>
          <el-col :span="24">
            <div class="pagination">
              <el-pagination
                  background
                  v-if='paginations.total > 0'
                  :page-sizes="paginations.pageSizes"
                  :page-size="paginations.pageSize"
                  :layout="paginations.layout"
                  :total="paginations.total"
                  :current-page='paginations.pageIndex'
                  @current-change='handleCurrentChange'
                  @size-change='handleSizeChange'>
              </el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 弹窗 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="60%" center>
      <el-form :model="oneNode"
               :rules="oneNodeRules"
               ref="nodeForm"
               label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="节点编码" prop="routeid">
              <el-input clearable v-model="oneNode.routeid" placeholder="节点编码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="节点名称" prop="content">
              <el-input clearable v-model="oneNode.content" placeholder="节点名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="归属业务" prop="business">
              <el-select clearable v-model="oneNode.business" placeholder="请选择">
                <el-option
                    v-for="item in busiTypes"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="归属模块" prop="module">
              <el-select clearable v-model="oneNode.module" placeholder="请选择">
                <el-option
                    v-for="item in taskModules"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预警时间" prop="warnTime">
              <!-- <el-input-number v-model="oneNode.warnTime" placeholder="预警时间"></el-input-number> -->
              <el-input clearable v-model="oneNode.warnTime" placeholder="预警时间"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="超时时间" prop="outTime">
              <!-- <el-input-number v-model="oneNode.outTime" placeholder="超时时间"></el-input-number> -->
              <el-input clearable v-model="oneNode.outTime" placeholder="超时时间"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预警样式" prop="warnSty">
              <el-input clearable v-model="oneNode.warnSty"
                        type="textarea"
                        :autosize="{ minRows: 1, maxRows: 6}"
                        placeholder="预警样式"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="超时样式" prop="outSty">
              <el-input clearable v-model="oneNode.outSty"
                        type="textarea"
                        :autosize="{ minRows: 1, maxRows: 6}"
                        placeholder="超时样式"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="时间单位" prop="timeType">
              <el-select @change="timeTypeChange" v-model="oneNode.timeType" clearable placeholder="请选择">
                <el-option
                    v-for="item in unitOfTimes"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否兜底" prop="bottomStatus">
              <el-select v-model="oneNode.bottomStatus"  clearable placeholder="请选择">
                <el-option
                    v-for="item in isOrNot"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remake">
              <el-input
                  clearable
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 6}"
                  placeholder="请输入备注"
                  v-model="oneNode.remake">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="doSave('nodeForm')">保 存</el-button>
        <el-button type="primary" @click="doPulish('nodeForm')">发 布</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {mapGetters} from 'vuex';
  import constant from '@/utils/constant';
  import { getToken, setToken, removeToken } from '@/utils/auth'
  import {doNodeAdd, doNodeDelete, doNodeUpdate, getNodePage, getOneNode} from "@/api/setting";

  export default {
    data() {
      var validateWarnTime = (rule, value, callback) => {
          let reg = /^\+?[1-9][0-9]*$/;
          if (value == '' || value == undefined || value == null) {
            return callback();
          } 
          if (!reg.test(value)) {
              callback(new Error('请输入正确的预警时间'));
          } else {
              callback();
          }
      };
      var validateOutTime = (rule, value, callback) => {
          let reg = /^\+?[1-9][0-9]*$/;
          if (value == '' || value == undefined || value == null) {
            return callback();
          } 
          if (!reg.test(value)) {
              callback(new Error('请输入正确超时时间'));
          } else {
              callback();
          }
      };
      return {
        dialogFormVisible: false,
        title: '',
        // 查询条件
        rules: {
          content: [],
          business: [],
          module: []
        },
        searchParams: {
          content: '', //节点名称
          business: '', //归属业务
          module: '', //归属模块
        },
        // 表格数据对象
        tableData: [],
        // 单一节点逻辑信息对象
        oneNodeRules: {
          routeid: [
            {required: true, message: '请输入节点编码', trigger: 'blur'}
          ],
          content: [
            {required: true, message: '请输入节点名称', trigger: 'blur'}
          ],
          business: [
            {required: true, message: '请选择归属业务', trigger: 'change'}
          ],
          module: [
            {required: true, message: '请选择归属模块', trigger: 'change'}
          ],
          warnTime: [
            { validator: validateWarnTime, trigger: 'blur' }
          ],
          outTime: [
            { validator: validateOutTime, trigger: 'blur' }
          ]
        },
        oneNode: {
          id: '',
          status: '',
          createId: '',
          createTime: '',
          lastUpdateId: '',
          lastUpdateTime: '',
          routeid: '',
          content: '',
          business: '',
          module: '',
          changgeBeforeClass: '',
          changgeBeforeMethod: '',
          changgeAfterClass: '',
          changgeAfterMethod: '',
          warnTime: '',
          outTime: '',
          warnSty: '',
          outSty: '',
          timeType: '',
          bottomStatus: '',
          remake: '',
          isPublish: ''
        },
        busiTypes: constant.busiTypes, // 归属业务
        taskModules: constant.taskModules, // 归属模块
        isPublish: constant.isPublish, // 是否发布
        unitOfTimes: constant.unitOfTimes, // 时间单位
        isOrNot: constant.bottomStatus, // 是否
        loading: false,
        //需要给分页组件传的信息
        paginations: {
          total: 0,      // 总数
          pageIndex: 1,  // 当前位于哪页
          pageSize: 10,  // 1页显示多少条
          pageSizes: [5, 10, 15, 20],  //每页显示多少条
          layout: "total, sizes, prev, pager, next, jumper"   // 翻页属性
        }
      }
    },
    // 视图未渲染
    created() {
    },
    // 视图已渲染完毕
    mounted() {
    },
    methods: {
      // 综合查询列表
      getList() {
        this.paginations.total = 0;
        this.tableData = [];
        let params = {
          "content": this.searchParams.content,
          "business": this.searchParams.business,
          "module": this.searchParams.module,
          "pageSize": this.paginations.pageSize,
          "pageNumber": this.paginations.pageIndex,
          // "orderBy": "",
        };
        this.loading = true;
        getNodePage(params).then(res => {
          this.loading = false;
          if (res.resultCode == constant.SUCCESS && res.data && res.data.total > 0) {
            this.paginations.total = res.data.total;
            this.tableData = res.data.rows;
          } else {
            this.tableData = [];
            this.initPaginations();
          }
        }).catch(err => {
          this.loading = false;
        });
      },
      // 新增弹框
      doAdd() {
        this.initOneNode();
        this.title = '新增节点逻辑';
        this.dialogFormVisible = true;
      },
      // 点击弹框保存
      doSave(formName) {
        this.oneNode.isPublish = 0;
        this.doValid(formName);
      },
      // 点击弹框发布
      doPulish(formName) {
        this.oneNode.isPublish = 1;
        this.doValid(formName);
      },
      doValid(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.doSaveOrUpdate();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      // 保存节点数据
      doSaveOrUpdate() {
        //let userId = JSON.parse(getToken(getToken(constant.TOKEN))).userKeyInfo.id;
        if (this.oneNode.id == '') {
          //this.oneNode.createId = userId;
          doNodeAdd(this.oneNode).then(res => {
            if (res.resultCode == constant.SUCCESS) {
              this.dialogFormVisible = false;
              this.$message({
                type: 'success',
                message: '新增成功！'
              });
            }
          });
        } else {
          //this.oneNode.lastUpdateId = userId;
          doNodeUpdate(this.oneNode).then(res => {
            if (res.resultCode == constant.SUCCESS) {
              this.dialogFormVisible = false;
              this.$message({
                type: 'success',
                message: '修改成功！'
              });
              this.getList();
            }
          });
        }
      },
      // 删除
      doDelete(id) {
        this.$confirm('确定是否删除？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
          doNodeDelete(id).then(res => {
            if (res.resultCode == constant.SUCCESS) {
              this.$message({
                type: 'success',
                message: '删除成功！'
              });
              this.subGetList();
            }
          });
        }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
        });
      },
      // 编辑
      doUpdate(id) {
        this.title = '编辑节点逻辑';
        this.dialogFormVisible = true;
        getOneNode(id).then(res => {
          if (res.resultCode == constant.SUCCESS && res.data) {
            this.oneNode = res.data;
          }
        });
      },
      // 时效设置
      doAgingSet(id) {
        this.$message('点击了时效设置');
      },
      // 时间类型触发事件
      timeTypeChange(value) {
        // if ('D' == value) {
        //   this.oneNode.bottomStatus = '';
        // }
      },
      // 重置弹框内容
      initOneNode() {
        this.oneNode.id = '';
        this.oneNode.status = '';
        this.oneNode.createId = this.name;
        this.oneNode.createTime = '';
        this.oneNode.lastUpdateId = '';
        this.oneNode.lastUpdateTime = '';
        this.oneNode.routeid = '';
        this.oneNode.content = '';
        this.oneNode.business = '';
        this.oneNode.module = '';
        this.oneNode.changgeBeforeClass = '';
        this.oneNode.changgeBeforeMethod = '';
        this.oneNode.changgeAfterClass = '';
        this.oneNode.changgeAfterMethod = '';
        this.oneNode.warnTime = '';
        this.oneNode.outTime = '';
        this.oneNode.warnSty = '';
        this.oneNode.outSty = '';
        this.oneNode.timeType = '';
        this.oneNode.bottomStatus = '';
        this.oneNode.remake = '';
        this.oneNode.isPublish = '';
      },
      // 重置分页条件
      initPaginations() {
        this.paginations.total = 0;
        this.paginations.pageIndex = 1;
      },
      // 每页多少条切换
      handleSizeChange(pageSize) {
        this.paginations.pageIndex = 1;
        this.paginations.pageSize = pageSize;
        this.getList();
      },
      // 上下分页
      handleCurrentChange(page) {
        this.paginations.pageIndex = page;
        this.getList();
      },
      // 根据条件查询列表
      subGetList() {
        this.paginations.pageIndex = 1;
        this.getList();
      },
      // 清除查询条件
      resetSearch(formName) {
        this.$refs[formName].resetFields();
      }
    },
    computed: {
      ...mapGetters([
        'tags'
      ]),
      reload() {
        return this.$store.state.loading.reload;
      }
    },
    activated() {
      if (this.reload) {
        this.$store.dispatch('loading/CHNAGE_RELOAD', false)
        Object.assign(this.$data, this.$options.data());
      }
    }
  }
</script>
<style lang="less" scoped>
  .fillcontain {
    padding-bottom: 0;
  }

  .contain {
    background: #fff;
    padding: 10px;
    margin-bottom: 20px;
  }

  .pagination {
    padding: 10px 20px;
    text-align: right;
  }

  .operationIcon {
    // padding: 12px;
    border: 1px solid #e5e5e5;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: inline-block;
    cursor: pointer;
    box-shadow: 0 0 3px #f9f9f9;

    .svg-icon {
      font-size: 14px;
      fill: #68a3fc;
    }
  }

  .search_container {
    padding: 20px 20px 0 20px;
    // border-top: 1px solid #e1e1e1;
  }
</style>
